為什麼要有同源政策？

可以先想想沒有同源政策會發生什麼事？

當你在看這篇文章時，可以看看你的瀏覽器開了多少分頁，可能開了 gmail 信箱的頁面，臉書，無數部落格等等，這時候這些網站間便可以讀取其他網站的資訊，如果這時候某個網頁要讀取你個人信箱的私人訊息也是可以的，這時你可能會想，這樣許多私人的資訊不就會被竊取嗎？

沒錯，正是為了避免惡意的腳本透過 DOM 存取資料，同源政策規定了只有來源相同的文件可以彼此存取資源。

那怎麼樣才算是同源呢？

我們先來看看訪問一個網頁時一定會需要的網址，一個網址可以大致分成四個部分：

http://www.example.com/dir/page.html

1. 協定 - http
2. 網域 - www.example.com
3. 埠號 - 沒有標明的話預設是80
4. 路徑 - dir/page.html

只要前三個相同就算是同源，以下可以比較一下哪些網址和上述的網址同源

圖片來源：維基百科

雖然同源的網站才能彼此存取資料，但不代表完全禁止跨來源存取資料，這是很大的一個迷思。MDN 提到兩個允許的特定情況：

1. 跨來源寫入

• 表單送出
• 連結
• 重新導向

2. 跨來源嵌入

• 圖片
• 使用HTML標籤 <video>，<audio>嵌入的影音媒體
• ＠font-face 的字型（部分瀏覽器不允許）
• iframes（如果 X-Frame-Options 的設定是 sameorigin 或 deny 則不允許嵌入）
• script（對於特定的API存取可能會被禁止）

放寬同源政策的兩大策略

由於不是所有網站都帶有惡意程式，加上網頁間有時必須取用第三方資源，所以有兩種方式可以讓網頁存取不同來源的資源：

1. 將指令稿 document.domain 設為文件後綴，不過因為安全性因素，MDN 上提到這種方式已被棄用

2. 使用跨來源資源共享（ Cross-Origin Resource Sharing，簡稱 CORS ）
   • 透過設定 Access-Control-Allow-Origin 為發送請求的網址或*，即可取得其他來源的資源

至於跨域請求會發生的錯誤以及 CORS 的詳細做法，就待之後再理解了～

參考資料：
MDN
Same-origin policy